import React, {Component} from 'react';
// import { connect } from 'dva';
import { NavBar,Icon, Card, WhiteSpace, Flex } from 'antd-mobile';
import Footer from '../components/Footer';
import styles from './Classdetail.css';

import profphoto from '../assets/profbrief.jpeg';
import classphoto from '../assets/classbrief.jpg';


class ClassDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      classname:'python30天入门',
      visible:true,
      profphoto: profphoto,
      profname:'丽台白',
      profdesc:'浙江大学计算机编程名师',
      classphoto:classphoto,
      classdesc:'python基础系列教程（一）',
      classtext:'',
      classmenu:'',
      comments:[]
    }
  }
  render(){
    return (
        <div>
          <NavBar
            mode="light"
            leftContent="返回"
            rightContent={
              <Icon type="ellipsis"/>
            }
          >{this.state.classname}</NavBar>
          <WhiteSpace size="lg"/>
          <Card full>
            <Card.Header
              title="课程介绍"
              extra={<Icon type="down" color="#666"/>}
            />
            <Card.Body>
              <Flex align="start">
              <Flex.Item >
                <div className={styles.photobox}>
                  <img src={this.state.classphoto} alt="none" className={styles.img}/>
                </div>
              </Flex.Item>
              <Flex.Item>
                <div>
                  <p className={styles.title}>{this.state.classname}</p>
                  <p className={styles.desc}>{this.state.classdesc}</p>
                </div>
              </Flex.Item>
              </Flex>
            </Card.Body>
          </Card>
          <WhiteSpace size="md"/>
          <Card full>
            <Card.Header
              title="名师简介"
              extra={<Icon type="down" color="#666"/>}
            />
            <Card.Body>
              <Flex align="start">
                <Flex.Item >
                  <div className={styles.photobox}>
                    <img src={this.state.profphoto} alt="none" className={styles.img}/>
                  </div>
                </Flex.Item>
                <Flex.Item>
                  <div>
                    <p className={styles.title}>{this.state.profname}</p>
                    <p className={styles.desc}>{this.state.profdesc}</p>
                  </div>
                </Flex.Item>
              </Flex>
            </Card.Body>
            <Card.Footer content="" extra={<a>更多信息</a>} />
          </Card>
          <WhiteSpace size="md"/>
          <div className={styles.mainbox}>
          </div>
          <Footer />
        </div>
    )
  }
}

export default ClassDetail;
